<template>
	<!-- 购买与加入购物车页面 -->
	<view class="">
		<view class="attrDialog">
			<view class="bg"></view>
			<view class="attrDialogContent">
				<view class="contentTop">
					<image :src="imgUrl + detailAttr.image" mode=""></image>
					<view class="contentTopText">
						<text class="price">￥{{contentPrice}}</text>
						<text class="attr">{{checkAttr}}</text>
					</view>
					<i class="iconfont" @click="closeDialog">&#xe62b;</i>
				</view>
				<view class="attrlist">
					<view class="attrItem" v-for="(item, index) in detailAttr.attr">
						<view class="attrItemTitle">
							{{item.attrname}}
						</view>
						<view class="attrItemVal">
							<view class="attrValItem " 
									v-for="(child, childIndex) in item.value" 
									:key="childIndex"
									:class="{'activeAttr': valIndex[index] == childIndex}"
									@click="attrCheck(index, childIndex)"
									>
								{{child}}
							</view>
						</view>
					</view>
					
					<view class="attrItem">
						<view class="attrItemTitle">
							数量
						</view>
						<view class="attrItemVal">
							<view class="shopNum">
								<button type="default" class="button" @click="reduce">-</button>
								<!-- <view class="button" @click="reduce">-</view> -->
								<view class="shuru"><input type="text" v-model="count" disabled/></view>
								<button type="default" class="button" @click="add">+</button>
							</view>
							<text class="stock">(库存:{{stock}}件)</text>
						</view>
					</view>
				</view>
			</view>
			<view class="attrButton" @click="attrButton">
				{{buttonTxt}}
			</view>
		</view>
	</view>
</template>

<script>
	import back from '../utils/back.js'
	export default{
		props:{
			detailAttr:{
				type:Array,
				default(){
					[]
				}
			},
			nums:{
				type:Number
			}
		},
		data(){
			return {
				imgUrl:this.$imgUrl,
				count:1,
				valIndex:[] ,//定义一个索引素组
				checkAttr:'',//获取选中的数据的值
				contentPrice:'',
				stock:'',
				buttonTxt:''
				
			}
		},
		mounted(){
			// [0,0] [1,1]
			// for( var i=0; i<this.detailAttr.attr.length; i++){
			//  		this.valIndex.push(0)
			//  	}
			if(this.$store.state.attrVal.length == 0){
				for( var i=0; i<this.detailAttr.attr.length; i++){
					this.valIndex.push(0)
				}
			}else{
				this.valIndex = this.$store.state.attrVal
				this.count = this.$store.state.count
			}
			
			// console.log(this.valIndex)
			// this.getVal()
			// 第一次dom节点跟新成功初始化时候的取值
			// console.log(this.getVal().toString())
			this.checkAttr = this.getVal().toString()
			this.getPrice(this.getVal())
			
			if(this.nums == 1){
				this.buttonTxt = "加入购物车"
			}else{
				this.buttonTxt="立即购买"
			}
		},
		
		// computed:{
		// 	detailList(){
		// 		return this.$store.state.detailList
		// 	}
		// },
		
		methods:{
			
			attrButton(){
				// 通过nums的取值来判断跳转的页面
				if(this.nums == 1){
					uni.navigateTo({
						// 数为1跳转至购物车
						// url:''
					})
				}else{
					// 不是1则跳转到订单页面(order)也就是点的为立即购买
					back('../order/order')
				}
			},
			
			closeDialog(){
				this.$emit('close')
				console.log(this.valIndex, this.checkAttr)
				// 传入状态机存储
				const detailList = {}
				detailList.attrVal = this.valIndex
				detailList.attrTxt = this.checkAttr
				detailList.count = this.count
				// console.log(detailList)
				this.$store.commit('setAttr', detailList)
			},
			
			reduce(){
				if( this.count == 1)return
				this.count--
			},
			add(){
				if( this.count >= this.stock)return
				this.count++
			},
			
			attrCheck(index, childIndex){
				//这里是将点击的item的索引和childItem的索引传下来
				// index表示的是数组valIndex里面的第几个 
				// childIndex表示数组valIndex里面第index数的数值
				 // this.valIndex[index]=childIndex
				//数组是引用类型
				//[0,0]
				this.valIndex.splice(index, 1, childIndex)
				
				var valcheck=this.getVal()
				// 再点击的的时候也要传值给上面的checkAttr
				this.checkAttr = valcheck.toString()
				console.log(valcheck)
				// for(var i=0; i<this.detailAttr.attr.length; i++){
				// 	// for(var j=0; j<this.detailAttr.attr[i].value.length; j++){
				// 	// 	console.log(this.valIndex[i])
				// 	// 	// 通过循环和点击的标签的索引获取里面的数值
				// 	// 	temp.push(this.detailAttr.attr[i].value[this.valIndex[i]])
				// 	// 	break
				// 	// }
				// 	temp.push(this.detailAttr.attr[i].value[this.valIndex[i]])
					
				// }
				// console.log(temp)
				
				// console.log(this.getPrcie(valcheck))
				this.getPrice(valcheck)
				// // 通过请求到的值来与新获取的值判断 来筛选数据
				// var temp = []
				// for(var i=0; i<this.detailAttr.checkAttr.length; i++){
				// 	if(this.detailAttr.checkAttr[i]['attr_0']==valcheck[0]&&this.detailAttr.checkAttr[i]['attr_1']==valcheck[1]){
				// 		temp.push(this.detailAttr.checkAttr[i])
				// 	}
				// }
				// console.log(temp)
				
				
			},
			 // 通过请求到的值来与新获取的值判断 来筛选数据
			getPrice(valcheck){
				var temp = []
				temp = this.detailAttr.checkAttr.find(item=>
				item.attr_0==valcheck[0]&&item.attr_1==valcheck[1])
				console.log(temp)
				this.contentPrice = temp.price
				this.stock = temp.stock
				this.attrid = temp.id
			},
			
			getVal(){
				var temp = []
					// 通过循环和点击的标签的索引获取里面的数值
				for(var i=0; i<this.detailAttr.attr.length; i++){
					temp.push(this.detailAttr.attr[i].value[this.valIndex[i]])
				}
				return temp
			}
		}
	}
</script>

<style>
	.attrDialog{
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}
	/* //遮罩 */
	.attrDialog .bg{
	
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, .5);
	}
	.attrDialogContent{
		background: #fff;
		height: 1070rpx;
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	.contentTop{
		height: 200rpx;
		position: relative;
		border-bottom: 1rpx solid #e5e5e5;
	}
	.contentTop i{
		position: absolute;
		right: 30rpx;
		top: 25rpx;
	}
	.contentTop image{
		position: absolute;
		left: 30rpx;
		top: -40rpx;
		width: 210rpx;
		height: 210rpx;
		/* border: 1rpx solid #e5e5e5; */
		background: #fff;
	}
	.contentTopText{
		margin-left: 280rpx;
	}
	.contentTopText .price{
		height: 44rpx;
		color: #f0415f;
		font-size: 36rpx;
		display: block;
		line-height: 44rpx;
		padding-top: 24rpx;
	}
	.contentTopText .attr{
		font-size: 24rpx;
		color: #000000;
		line-height: 40rpx;
		height: 40rpx;
	}
	.attrlist{
		padding: 0 30rpx;
	}
	.attrItemTitle{
		height: 70rpx;
		line-height: 70rpx;
		color: #999;
		font-size: 30rpx;
	}
	 .attrItemVal{
		
		
	/* 	display: flex; */
	} 
	.attrItem{
		overflow: hidden; // 子元素用的float 父级要给overflow:hidden;
		height: auto;
	}
	.attrValItem{
		padding: 0 30rpx;
		border: 1rpx solid #e5e5e5;
		height: 70rpx;
		line-height: 70rpx;
		float: left;
		font-size: 24rpx;
		color: #666;
		margin-right: 30rpx;
	}
	.attrValItem.activeAttr{
		color: #00c3f5;
		border-color: #00c3f5;
	}
	.shopNum{
		width: 240rpx;
		height: 70rpx;
		border: 1rpx solid #e5e5e5;
		display: flex;
		float: left;
	}
	.stock{
		height: 70rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		color: #999;
		margin-left: 20rpx;
	}
	.shopNum .button{
		width: 70rpx;
		line-height: 70rpx;
		text-align: center;
	}
	.shopNum input{
		width: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		border-left: 1rpx solid #e5e5e5;
		border-right: 1rpx solid #e5e5e5;
		text-align: center;
	}
	.attrButton{
		height: 90rpx;
		width: 100%;
		line-height: 90rpx;
		position: absolute;
		bottom: 0;
		background: #00c3f5;
		text-align: center;
		letter-spacing: 10rpx;
		color: #fff;
		font-size: 28rpx
	}
</style>
